import React from "react";
import "./FilterTabs.css";

export interface Tab {
  key: string;
  label: string;
  icon?: React.ReactNode;
}

interface FilterTabsProps {
  tabs: Tab[];
  activeKey: string;
  onChange: (key: string) => void;
}

const FilterTabs: React.FC<FilterTabsProps> = ({ tabs, activeKey, onChange }) => (
  <div className="filter-tabs">
    {tabs.map(tab => (
      <div
        key={tab.key}
        className={`filter-tab${activeKey === tab.key ? " active" : ""}`}
        onClick={() => onChange(tab.key)}
      >
        {tab.icon && <span className="filter-tab-icon">{tab.icon}</span>}
        {tab.label}
      </div>
    ))}
  </div>
);

export default FilterTabs;